<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="60%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain">
                <div v-if="index1>=1" style="page-break-after: always;"></div>
                <div class="topHeader">
                    <div class="title">{{detail.contract.factory_apply_name}}</div>
                    <div class="noName">
                        <div></div>
                        <div class="type">织机收货单</div>
                        <div style="text-align: end;">No.:{{detail.contract.contract_no}}</div>
                    </div>
                </div>
                <div class="contont">
                    <div class="hreder">
                        <div class="top">
                            <div class="detail">
                                <div class="detailName">承制人 : {{detail.contract.referred_as}}</div>
                                <div class="detailName">批号 : {{detail.contract.batch_number}}</div>
                                <div class="detailName">备注 : {{detail.contract.remark}}</div>
                            </div>
                            <div class="detail">
                                <div class="detailName">工序名 : {{detail.contract.two_process_title}}</div>
                                <div class="detailName">工厂货号 : {{detail.contract.factory_number}}</div>
                                <div class="detailName">针种 : {{detail.contract.needle_seed}}</div>
                            </div>
                            <div class="detail">
                                <div class="detailName">发织合同 : {{detail.contract.contract_no}}</div>
                                <div class="detailName">发织日期 : {{detail.contract.contract_date}}</div>
                                <div class="detailName">毛种 : {{detail.contract.wool_seed}}</div>
                            </div>
                            <div class="detail">
                                <div class="detailName">完成日期 : {{detail.contract.due_date}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contont">
                    <table>
                        <tr>
                            <td style="width:100px">收货时间</td>
                            <td class="first" style="width:150px" colspan="2"><span class="title1">尺码</span><br><span class="title2">数量</span><br><span
                                    class="title3">色组</span></td>
                            <td style="width:80px"  v-for="(item,index) in detail.contract.orderDetail" :key="index">{{item.goods_size}}</td>
                            <td style="width:80px">小计(件)</td>
                            <td style="width:80px">重量(KG)</td>
                            <td style="width:80px;border:none">备注</td>
                        </tr>
                        <tr v-for="(item1,index1) in detail.delivery_detail" :key="index1">
                            <td style="width:100px">{{item1.date}}</td>
                            <td style="width:150px;border:none">{{item1.colour}}</td>
                            <td style="border:none"></td>
                            <td style="width:80px" v-for="(item,index) in detail.contract.orderDetail" :key="index">
                                <div v-for="(item2,index2) in item1.size_data" :key="index2">
                                    <span v-if="item.goods_size==item2.goods_size">
                                        {{item2.num}}
                                    </span>
                                </div>
                            </td>
                            <td style="width:80px">{{item1.total_count}}</td>
                            <td style="width:80px">{{item1.total_weight}}</td>
                            <td style="width:80px;border:none"></td>
                        </tr>
                    </table>
                </div>
                <div class="accumulate">
                    <div>累计仅供参考</div>
                    <div>累计发 : {{detail.contract.total_count}}</div>
                    <div>累计收 : {{detail.contract.accumulate_take_num}}</div>
                    <div>待收 : {{detail.contract.pending_take_num}}</div>
                    <div>累计重 : {{detail.contract.accumulate_total_weight}}</div>
                </div>
                <div class="take">
                    <div>收货人 : {{detail.contract.receive_name}}</div>
                    <div>审核 : </div>
                    <div>承制人: {{detail.contract.referred_as}}</div>
                </div> 
                <hr>
                <div style="text-align:end">打印时间 : {{detail.contract.current_time}}</div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印收货单',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:{},
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            setData(data){
                console.log('11111 :>> ', data);
                this.detail = data
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
.printMain{
    margin: 0 30px;
}
div{
    color: #000;
}
.topHeader{
    margin-top: 50px;
    margin-bottom: 10px;
    .title,.type{
        text-align: center;
        font-size: 30px;
        color: #000;
        margin-bottom: 10px;
    }
    .noName{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        div{
            width: 33.3%;
        }
    }
}
.name{
    margin-left: 10px;
}
.contont{
    display: flex;
    margin-top: 10px;
    .hreder{
        margin-left: 10px;
        width: 100%;
        .top{
            height: 80%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .detail{
                line-height: 32px;
            }
        }
        .comment{
            margin-bottom: 20px;
            display: inline-block;
        }
    }
}
.material{
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
}
.sizeTable{
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
.sonClass{
    text-align:center;
    border-right: 1px solid #000000;
    width:100%;
}
.sizeTabSon{
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000000;
}
.accumulate{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
}
.take{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 60px 60px 5px;
}
hr {
    border: none;
    border-top: 2px solid #666;
    margin: 10px 0;
}
table {
    border-collapse: collapse;
}
table,tr,td {
    border: 1px solid black;
}
td {
    text-align: center;
    height: 50px;
    /*这里需要自己调整，根据自己的需求调整高度*/
    position: relative;
}
td[class=first] {
    width: 100px;
}
td[class=first]:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 149px;
    top: 0;
    left: 0;
    background-color: #000;
    display: block;
    transform: rotate(-81deg);
    transform-origin: top;
    -ms-transform: rotate(-75deg);
    -ms-transform-origin: top;
}

td[class=first]:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: #000;
    display: block;
    transform: rotate(-60deg);
    transform-origin: top;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: top;
}

.title1 {
    position: absolute;
    top: 0px;
    right: 0px;
}

.title2 {
    position: absolute;
    top: 26px;
    right: 35px;
}

.title3 {
    position: absolute;
    top: 30px;
    left: 0px;
}
</style>
